<template>
	<view class="content">
		<image src="../../static/1.jpg"></image>
		<view class="info">
			<view class="base">
				<view class="name">
					2018 CIMIX 中国国际影视文化投资论坛
				</view>
				<view class="llsc">
					<view>浏览 897</view>
					<view>收藏 123</view>
				</view>
				<view class="llsc">
					#户外 #it #运动
				</view>
			</view>
			<view class="ul">
				<view class="li">
					<view class="uni-icon">&#xe602;</view> 2018-9-15 9:00 - 2018-9-15 12:00
				</view>
				<view class="li">
					<navigator url="/pages/map/index">
					<view class="uni-icon">&#xe650;</view> 福建厦门国际会展中心B2酒家厅
					<text>查看</text>
					</navigator>
				</view>
				<view class="li">
					<navigator url="/pages/detailUser/index">
						<view class="uni-icon">&#xe611;</view> 45 / 100
						<text>查看</text>
					</navigator>
				</view>
				<view class="li ">
					<view class="uni-icon">&#xe605;</view>
					<view class="money">¥ 0</view>
				</view>
			</view>
		</view>
		<!-- 负责人 -->
		<view class="user">
			<view class="img">
				<image src="../../static/2.jpg"></image>
			</view>
			<view class="user-info">
				<view class="name">
					youjie
				</view>
				<view class="leve">负责活动5场&nbsp;&nbsp;&nbsp;&nbsp;好评度 555</view>
				<view class="email">✉ youjie2015@126.com</view>
				<view class="user-desc txt-cut2">
					做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!
				</view>
				<view class="phone" @tap="callPhone()">☎</view>
			</view>
		</view>
		<!-- 历史评论 -->
		<view class="desc">
			<view class="desc-title">
				历史评论
			</view>
			<view class="desc-content pl">
				<view class="button">
					<navigator url="/pages/comment/index" hover-class="navigator-hover">
						评论
					</navigator>
				</view>
				<view class="button">
					活动咨询
				</view>
			</view>
		</view>
		<!-- 简介 -->
		<view class="desc">
			<view class="desc-title">
				活动详细
			</view>
			<view class="desc-content">
				做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!做好每一场活动!
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="op">
			<view class="icon" @tap="goback()">
				<view class="uni-icon">&#xe607;</view>
				<view>首页</view>
			</view>
			<view class="icon">
				<view class="uni-icon">&#xe603;</view>
				<view>收藏</view>
			</view>
			<view class="icon">
				<view class="uni-icon">&#xe6eb;</view>
				<view>分享</view>
			</view>
			<view class="opbutton">
				<navigator url="/pages/signup/index" hover-class="navigator-hover">
					立即报名
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ActivityDetail',
		data: function () {
			return {

			};
		},
		methods: {
			goback() {
				uni.navigateBack({
					delta: 9999
				})
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '18674497603' //仅为示例
				});
			}
		},
	}
</script>

<style scoped>
	.content image {
		width: 100%;
		height: 450px;
	}

	.content {
		padding-bottom: 200px;
	}

	.info {
		background: #FFFFFF;
		padding: 20px 20px 0;
	}

	.info .base .name {
		margin-top: 5px;
		margin-bottom: 10px;
		font-size: 34px;
	}

	.info .base .llsc {
		display: flex;
		color: #888888;
		font-size: 25px;
	}

	.info .base .llsc>view {
		margin-right: 20px;
	}

	.info .ul {
		margin-top: 30px;
	}

	.info .li {
		padding: 20px 0px 20px 0px;
		border-top: 1px solid #eee;
	}

	.info .li .uni-icon {
		margin: 0px 20px;
	}

	.money {
		color: #339933;
		display: inline;
		margin-left: 13px;
	}

	.user {
		display: flex;
		position: relative;
		margin-top: 20px;
		background: #fff;
		padding: 30px 20px;
	}

	.user image {
		width: 130px;
		height: 130px;
		border: 1px solid #eee;
		border-radius: 20px;
	}

	.user-info {
		padding: 0 0 0 40px;
		font-size: 26px;
	}

	.user-info>view {
		padding: 0px 0px 10px;
	}

	.user-info .name {
		font-size: 35px;
		margin-top: -8px;
	}

	.user-info .user-desc {
		color: #888888;
		font-size: 25px;
	}

	.user-info .phone {
		position: absolute;
		top: 0px;
		right: 50px;
		font-size: 60px;
		color: #f32;
	}

	.desc {
		padding: 0 20px 20px 20px;
		background: #FFFFFF;
		margin-top: 20px;
	}

	.desc-title {
		height: 90px;
		line-height: 110px;
		font-size: 30px;
		border-bottom: 1px solid #eee;
		margin-bottom: 20px;
	}

	.desc-content {
		font-size: 28px;
	}

	.desc-content.pl {
		display: flex;
		justify-content: center;
	}

	.desc-content.pl .button {
		flex: 1;
		margin-right: 30px;
		border: 1px solid #FF6600;
		color: #FF6600;
		text-align: center;
		font-size: 35px;
		line-height: 55px;
	}

	.op {
		position: fixed;
		display: flex;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100px;
		background: #fff;
		font-size: 25px;
		color: #888;
	}

	.op .icon {
		width: 130px;
		height: 100%;
		padding-top: 20px;
		text-align: center;
	}

	.op .opbutton {
		flex: 1;
		background: #0099CC;
		color: #fff;
		height: 100px;
		font-size: 30px;
		line-height: 100px;
		text-align: center;
	}

	text {
		color: #0099CC;
	}
</style>
